<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>岗位列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/oksub.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
    <blockquote class="layui-elem-quote" style="margin: 5px 0;">当前位置：系统管理>后台设置>岗位管理</blockquote>
	<div class="layui-row">
		<form class="layui-form ok-search-form">
			<div class="layui-form-item">
                <div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" style="width: 340px;" class="layui-input" placeholder="支持岗位代码/岗位名称检索" autocomplete="off" id="searchname" name="searchname">
					</div>
				</div>
				<button class="layui-btn" style="margin-left: 150px;margin-bottom: 10px;" lay-submit="" lay-filter="search">
                            <i class="layui-icon">&#xe615;</i>
                        </button>
			</div>
		</form>
	</div>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script>
	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let table = layui.table;
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
		let $ = layui.jquery;

		okLoading.close($);

		laydate.render({elem: "#startTime", type: "datetime"});
		laydate.render({elem: "#endTime", type: "datetime"});

		let userTable = table.render({
			elem: '#tableId',
			url: '/config/jobs_list/',
			limit: 20,
            height:'full-140',
			page: true,
			toolbar: "#toolbarTpl",
			size: "sm",
			cols: [[
				{type: "checkbox", fixed: "left"},
				{field: "id", title: "ID", width: 60, sort: true},
				{field: "job_code", title: "岗位代码"},
				{field: "job_name", title: "岗位名称"},
				{field: "remark_describe", title: "备注", width: 250},
				{field: "create_time", title: "创建时间", width: 200},
				{title: "操作", align: "center",width:150, fixed: "right", templet: "#operationTpl"}
			]],
			done: function (res, curr, count) {

			}
		});
        // 这个地方说了个寂寞
		form.on("submit(search)", function (data) {
			userTable.reload({
				url: "{% url 'config:jobs_search' %}",
				request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                },
				page: {curr: 1},
                where:{
                    "searchname":$('#searchname').val()
                }
			});
			return false;
		});

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "batchDel":
					batchDel();
					break;
				case "add":
					add();
					break;
			}
		});

		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "del":
					del(data);
					break;
			}
		});

		function add() {
			okLayer.open("添加岗位", "{% url 'config:jobs_insert_view' %}", "90%", "90%", null, function () {
				userTable.reload();
			})
		}

		function edit(data) {
			okLayer.open("更新岗位", "{% url 'config:jobs_edit_view' %}", "90%", "90%", function (layero, index) {
				let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			})
		}

		function del(data) {
			okLayer.confirm("确定要删除吗？", function () {
				okUtils.ajax("/config/jobs_del/"+data.id, "delete", data.field, true).done(function (response) {
					okUtils.tableSuccessMsg(response.msg);
				}).fail(function (error) {
					console.log(error)
				});
			})
		}
	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
        {% for lao in data %}
            {% if lao.menu_code == '50500501' %}
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加岗位</button>
            {% endif %}
        {% endfor %}
	</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    {% for l in data %}
        {% if l.menu_code == '50500502' %}
    <a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">编辑</button></a>
    &nbsp;  {% elif l.menu_code == '50500503' %}
    <a href="javascript:" title="删除" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></a>
    {% endif %}
    {% endfor %}
</script>

</body>
</html>
